<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>手机商城首页</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style1.css" type="text/css" />
<script src="${pageContext.request.contextPath}/js/jquery-2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>	
<body>
${info }
	<nav id="top">
		<div class="container">
			<div class="row">
				<div class="col-xs-6">
					<ul class="language">
					<% if(request.getSession().getAttribute("userToken")!=null){ %>
					    <li style="float: left;">
					    <a href="${pageContext.request.contextPath}/userInfo/getUserInfo">
					    		你好!用户${sessionScope.userToken.userAccount }</a></li>
					    <%}else{ %>
						<li style="float: left;">
							<a href="${pageContext.request.contextPath}/pages/user/login.jsp">
							<span class="glyphicon glyphicon-log-in"></span>亲，请登录&nbsp;&nbsp;&nbsp;&nbsp;</a>
							</li>
						<li style="float: left;">
						<a href="${pageContext.request.contextPath}/pages/user/register.jsp">
						<span class="glyphicon glyphicon-pencil"></span>注册</a>
						</li>
						<%} %>
					</ul>
				</div>
				<div class="col-xs-6">
					<ul class="top-link">
					<% if(request.getSession().getAttribute("userToken")!=null){ %>
						<li><a href="${pageContext.request.contextPath}/saleAccount/logout"><span class="glyphicon glyphicon-log-out"></span>注销</a></li>
					<%} %>
					</ul>

				</div>
			</div>
		</div>
	</nav>
	<!--Header-->
	<header class="container">
		<div class="row">
			<div class="col-md-4">
				<div id="logo"><img src="${pageContext.request.contextPath}/images/logo.png" /></div>
			</div>
			<div class="col-md-6">
				<div class="form-search">  
					<input type="text" class="input-medium search-query" id="goods_Name" placeholder="输入 手机名称/品牌">  
					<button class="btn" id="searchMh"><span class="glyphicon glyphicon-search"></span></button>  
				</div>
			</div>
		</div>
	</header>
	<!--Navigation-->
    <nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
			  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li class="dropdown" value="华为"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">华为</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li value="华为荣耀6"><a href="#">华为荣耀6</a></li>
									<li value="华为Mate9"><a href="#">华为Mate9</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li class="dropdown"  value="iphone"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">iphone</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li value="iphone6"><a href="#">iphone6</a></li>
									<li value="iphone6 Plus"><a href="#">iphone6 Plus</a></li>
									<li value="iphone7"><a href="#">iphone7</a></li>
									<li value="iphone7 Plus"><a href="#">iphone7 Plus</a></li>
								</ul>
							</div> 
						</div>
					</li>
					<li class="dropdown" value="Samsung"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" >Samsung</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li  value="samsung s4"><a href="#">Samsung S4</a></li>
									<li value="samsung s5"><a href="#">Samsung S5</a></li>
									<li value="samsung s6"><a href="#">Samsung S6</a></li>
									<li value="samsung s7"><a href="#">Samsung S7</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li class="dropdown" value="小米"><a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" >小米</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li value="小米note2"><a href="#">小米note2</a></li>
									<li value="小米note3"><a href="#">小米note3</a></li>
									<li value="小米note4"><a href="#">小米note4</a></li>
									<li value="小米Max"><a href="#">小米Max</a></li>
								</ul>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</nav>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
	<div id="page-content" class="home-page">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<!-- Carousel -->
					<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators hidden-xs">
							<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						</ol>
						<!-- Wrapper for slides -->
						<div class="carousel-inner">
							<div class="item active">
								<a href="${pageContext.request.contextPath }/goods/detail?id=107" target="_blank">
									<img src="${pageContext.request.contextPath}/images/banner01.jpg" alt="First slide">
								</a>
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
							<div class="item">
								<a href="${pageContext.request.contextPath }/goods/detail?id=117" target="_blank">
									<img src="${pageContext.request.contextPath}/images/banner02.jpg" alt="Second slide">
								</a>
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div>
							</div>
							<div class="item">
								<a href="${pageContext.request.contextPath }/goods/detail?id=87" target="_blank">
									<img src="${pageContext.request.contextPath}/images/banner03.jpg" alt="Third slide">
								</a>
								<!-- Static Header -->
								<div class="header-text hidden-xs">
									<div class="col-md-12 text-center">
									</div>
								</div><!-- /header-text -->
							</div>
						</div>
						<!-- Controls -->
						<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left"></span>
						</a>
						<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</a>
					</div><!-- /carousel -->
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="heading"><h2>热销产品</h2></div>
					<div class="products">
						<c:forEach items="${specialShow }" var="item">
							<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
								<div class="product">
									<a href="<%=basePath%>goods/detail?id=${item.saleGoods.id}" target="_blank">
										<div class="image"><img style="width: 330px;height: 250px;" src="${pageContext.request.contextPath }/images/${item.goods.icon}" /></div>
									</a>
									<div class="buttons"></div>
									<div class="caption">
										<div class="name"><h3>${item.goods.goodsName }</h3></div>
										<div class="price">$${item.saleGoods.price }</div>
										<div class="rating">
											<span><a href="<%=basePath%>goods/detail?id=${item.saleGoods.id}">速速抢购</a></span>
										</div>
									</div>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="banner">
					<div class="col-sm-6">
						<a href="${pageContext.request.contextPath }/goods/detail?id=112" target="_blank">
							<img style="width: 555px;height: 153px;" src="${pageContext.request.contextPath}/images/sub-banner4.jpg" />
						</a>
					</div>
					<div class="col-sm-6">
						<a href="${pageContext.request.contextPath }/goods/detail?id=102" target="_blank">
							<img style="width: 555px;height: 153px;" src="${pageContext.request.contextPath}/images/sub-banner5.png" />
						</a>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12">
					<div class="heading" id="selectParent"><h2>商品列表</h2></div>
					<div class="products" id="selectBox">
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	//页面加载时候执行
	$(function(){
		$.ajax({
			type: 'POST',
			url: '${pageContext.request.contextPath }/goods/specialQuery',
			dataType: "json",
		 	success: function(data){
		 		$("#selectBox").remove();
				var main_div = $('<div class="products" id="selectBox"></div>');
				$("#selectParent").append(main_div);
				for(i in data){
					var div1 = $('<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>');
					var div2 = $('<div class="product"></div>');
					var div3 = $('<a href="${pageContext.request.contextPath }/goods/detail?id='+data[i].saleGoods.id+'" target="_blank"></a>');
					var div4 = $('<div class="image"><img style="width: 330px;height: 250px;" src="${pageContext.request.contextPath }/images/'+data[i].goods.icon+'" /></div>');
					var div5 = $('<div class="buttons"></div>');
					var div6 = $('<div class="caption"></div>');
					var div7 = $('<div class="name"><h3>'+data[i].goods.goodsName+'</h3></div>');
					var div8 = $('<div class="price">$'+data[i].saleGoods.price+'</div>');
					var div9 = $('<div class="rating"><span><a href="${pageContext.request.contextPath }/goods/detail?id='+data[i].saleGoods.id+'">速速抢购</a></span></div>');
					main_div.append(div1);
					div1.append(div2);
					div2.append(div3);
					div3.append(div4);
					div4.append(div5);
					div5.append(div6);
					div6.append(div7);
					div7.append(div8);
					div8.append(div9);
				}
			}
		});
	});
	
	$(".dropdown .dropdown-menu .list-unstyled li a").on("click",function(){
		var value= $(this).text();
		var url = "${pageContext.request.contextPath }/pages/user/searchProduct.jsp";
		window.open(encodeURI(url+"?mobileName="+value));
	});
	
	$("#searchMh").on("click",function(){
		var value = $("#goods_Name").val();
		var url = "${pageContext.request.contextPath }/pages/user/searchProduct.jsp";
		window.open(encodeURI(url+"?mobileName="+value));
	});
</script>
</html>